import React, { useEffect, useState} from 'react'
import { Modal, Form, Input, Button, InputNumber, Select } from "antd"
import UploadProductImage from "./Upload"
import * as http from "../../api"  //引入所有的http请求

let { Option } = Select
export default function Dialog(props) {

    let { dialogVisible, actionType, onCancel,onAddProduct } = props
   //hooks
   let [categoryList,setCategoryList]=useState([])  //用于储存类目
   //dialog已经打开了，显示，发请求获取类目
  
   useEffect(function(){  //hooks中针对副作用的hook ,hool不能嵌套在if之中
    console.log(1);   
        // http.getCagegory
        // console.log(http);
        if(dialogVisible){
            http.getCategory()
            .then(res=>{    
                console.log(res);
                if(res.data.state){
                    //获取数据成功
                    setCategoryList(res.data.data)
                }
            })
        }
  },[dialogVisible])
  console.log(categoryList);

    const layout = {
        labelCol: { span: 24 },
        wrapperCol: { span: 24 },
    };
    const validateMessages = {
        required: '${label}必须填写',
        number: {
            range: '${label}必须在${min}到${max}之间'
        },
    };

    const onFinish = (values) => { //表单完成事件
        // console.log(values);
        onAddProduct(values)
    };

    const handleSelectChange = (info,e) => { //下拉框选择触发事件
            console.log(e)
    }
    const showDialog = () => {

    }

    
    //点击取消按钮触发的事件
    const handleCancel=()=>{
        //关闭dialog
        onCancel()
    }
   
    return (
      
        <Modal onCancel={onCancel} visible={dialogVisible} footer={false}>
            <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                
            <Form.Item name={['imageUrl']} valuePropName="imgUrl" label="商品图片">
                    <UploadProductImage/>
                </Form.Item>

                <Form.Item name={['category_id']} label="选择类目" rules={[{ required: true }]}>
                    <Select value="lucy" style={{ width: 240 }} onChange={handleSelectChange}>
                              {categoryList.map((item)=>{              
                                   return  <Option  key={item.category_id} value={item.category_id} >{item.categoryName}</Option>
                              })}                  
                    </Select>
                </Form.Item>
                <Form.Item name={['productName']} label="商品名称" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['price']} label="商品价格" rules={[{ type: 'number', min: 0.1, max: 9999, required: true }]}>
                    <InputNumber />
                </Form.Item>
                <Form.Item name={['inventory']} label="商品库存" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['description']} label="商品描述" rules={[{ required: true }]}>
                    <Input.TextArea />
                </Form.Item>
                <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }} rules={[{ required: true }]}>
                    <Button type="primary" htmlType="submit" >
                        提交
                    </Button> 
                    <Button type="p rimary" onClick={handleCancel}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}